<template>
  <section class="entry-table el-table--striped">
    <el-table
      :empty-text="data === null ? '加载中...' : '暂无数据'"
      :data="data || []"
      border
      :span-method="arraySpanMethod"
      :highlight-current-row="false"
      :row-class-name="checkRowClassName"
      style="max-width: 100%"
    >
      <el-table-column prop="no" label="编号"  align="center"  width="60" fixed />
      <el-table-column prop="date" label="业务日期"  align="center"  width="120" />
      <el-table-column label="借方科目"  align="center"  width="160">
        <template slot-scope="scope">
          <template v-if="isEdit && (scope.row.borrowSubject || scope.row.borrowAmount) && nowSelectIndex === scope.column.id + scope.$index">
            <subjectSelect
              v-model="scope.row.borrowSubjectCode"
              @change="(data, name) => subjectSelect(scope.row, data, 'borrowSubject', name)"
              :ref="scope.column.id + scope.$index"
            >
            </subjectSelect>
          </template>
          <template v-else>
            <div  v-if="scope.row.borrowSubject || scope.row.borrowAmount" class="table-subject" @click="selectSubject(scope)">{{ scope.row.borrowSubject }} <i v-if="isEdit && (scope.row.borrowSubject || scope.row.borrowAmount)" class="el-icon-edit"></i></div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="borrowAmount" label="借方金额"  align="center"  width="120">
        <template slot-scope="scope">
          <el-input type="number" @blur="nowSelectIndex = null" :ref="scope.column.id + scope.$index" v-model="scope.row.borrowAmount" v-if="nowSelectIndex === scope.column.id  + scope.$index"></el-input>
          <div class="table-subject" @click="selectSubject(scope)" v-else-if="scope.row.borrowAmount">{{scope.row.borrowAmount}} <i v-if="isEdit" class="el-icon-edit"></i></div>
        </template>
      </el-table-column>
      <el-table-column prop="borrowNo" label="发票凭证号"  align="center"  width="140">
        <template slot-scope="scope">
          <el-input type="textarea" @blur="nowSelectIndex = null" :ref="scope.column.id + scope.$index" v-model="scope.row.borrowNo" v-if="nowSelectIndex === scope.column.id  + scope.$index"></el-input>
          <div class="table-subject" @click="selectSubject(scope)" v-else-if="scope.row.borrowNo || scope.row.borrowAmount">{{scope.row.borrowNo}} <i v-if="isEdit" class="el-icon-edit"></i></div>
        </template>
      </el-table-column>
      <el-table-column prop="borrowSide" label="借方对手方"  align="center"  width="160">
        <template slot-scope="scope">
          <el-input type="textarea" @blur="nowSelectIndex = null" :ref="scope.column.id + scope.$index" v-model="scope.row.borrowSide" v-if="nowSelectIndex === scope.column.id  + scope.$index"></el-input>
          <div class="table-subject" @click="selectSubject(scope)" v-else-if="scope.row.borrowSide || scope.row.borrowAmount">{{scope.row.borrowSide}} <i v-if="isEdit" class="el-icon-edit"></i></div>
        </template>
      </el-table-column>
      <el-table-column prop="loanSubject" label="贷方科目"  align="center"  width="160">
        <template slot-scope="scope">
          <template v-if="isEdit && (scope.row.loanSubject || scope.row.loanAmount) && nowSelectIndex === scope.column.id  + scope.$index">
            <subjectSelect
              v-model="scope.row.loanSubjectCode"
              @change="(data, name) => subjectSelect(scope.row, data, 'loanSubject', name)"
               :ref="scope.column.id + scope.$index"
            >
            </subjectSelect>
          </template>
          <template v-else>
            <div  v-if="scope.row.loanSubject || scope.row.loanAmount" class="table-subject" @click="selectSubject(scope)">{{ scope.row.loanSubject }} <i v-if="isEdit && (scope.row.loanSubject || scope.row.loanAmount)" class="el-icon-edit"></i></div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="loanAmount" label="贷方金额"  align="center"  width="120">
        <template slot-scope="scope">
          <el-input type="number" @blur="nowSelectIndex = null" :ref="scope.column.id + scope.$index" v-model="scope.row.loanAmount" v-if="nowSelectIndex === scope.column.id  + scope.$index"></el-input>
          <div class="table-subject" @click="selectSubject(scope)" v-else-if="scope.row.loanAmount">{{scope.row.loanAmount}} <i v-if="isEdit" class="el-icon-edit"></i></div>
        </template>
      </el-table-column>
      <el-table-column prop="loanNo" label="支付凭证"   align="center"  width="140">
        <template slot-scope="scope">
          <el-input type="textarea" @blur="nowSelectIndex = null" :ref="scope.column.id + scope.$index" v-model="scope.row.loanNo" v-if="nowSelectIndex === scope.column.id  + scope.$index"></el-input>
          <div class="table-subject" @click="selectSubject(scope)" v-else-if="scope.row.loanNo || scope.row.loanAmount">{{scope.row.loanNo}} <i v-if="isEdit" class="el-icon-edit"></i></div>
        </template>
      </el-table-column>
      <el-table-column prop="loanSide" label="贷方对手方"   align="center"  width="160">
        <template slot-scope="scope">
          <el-input type="textarea" @blur="nowSelectIndex = null" :ref="scope.column.id + scope.$index" v-model="scope.row.loanSide" v-if="nowSelectIndex === scope.column.id  + scope.$index"></el-input>
          <div class="table-subject" @click="selectSubject(scope)" v-else-if="scope.row.loanSide || scope.row.loanAmount">{{scope.row.loanSide}} <i v-if="isEdit" class="el-icon-edit"></i></div>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="业务描述"  align="center"  width="120">
        <template slot-scope="scope">
          <el-input type="textarea" @blur="nowSelectIndex = null" :ref="scope.column.id + scope.$index" v-model="scope.row.desc" v-if="nowSelectIndex === scope.column.id  + scope.$index"></el-input>
          <div class="table-subject" @click="selectSubject(scope)" v-else>{{scope.row.desc}} <i v-if="isEdit" class="el-icon-edit"></i></div>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
/**
 * @file 智能做账详情 / 分录表
 */
import map from "@/components/map";
import subjectSelect from "@/components/subjectSelect";

export default {
  props: {
    data: {
      type: Array,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      nowSelectIndex: null
    };
  },
  components: {
    subjectSelect
  },
  created() {},
  watch: {
    isEdit(n, o) {
      if(!n) {
        this.nowSelectIndex = null;
      }
    }
  },
  
  methods: {
    subjectSelect(scope, data, name = 'borrowSubject', n) {
      scope[name] = n
    }, 
    selectSubject(scope) {
      if (this.isEdit) {    
         setTimeout(() => {
           this.nowSelectIndex = scope.column.id + scope.$index
           this.$nextTick(() => {
              setTimeout(() => {
                this.$refs[this.nowSelectIndex].focus();
              }, 50)
          })
         }, 20)
         
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 10) {
        if (row.rowSpan) {
          return [row.rowSpan, 1];
        } else {
          return [0, 0];
        }
      }
    },
    checkRowClassName(data) {
      if (data.row.isHigh) {
        return "el-table__row--striped";
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../assets/var.less";

.table-subject {
  min-height: 40px;
  line-height: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.el-icon-edit {
  margin-left: 2px;
  }

  .entry-table {
    flex: 1;
  }
</style>